<template>
    <!-- 已开发餐厅进度占比 -->
    <div class="restaurant-progress">
        <echart-title title="已开发餐厅进度占比"></echart-title>
        <div class="restaurant-content bj-flex-center">
            <div class="restaurant-img restaurant-left bj-column-center">
                <div>
                    <div class="bj-flex-start">
                        <span class="restaurant-title">入驻前%</span>
                        <div class="restaurant-square"></div>
                    </div>
                    <div class="restaurant-number">
                        60  | 60%
                    </div>
                </div>
                <div class="pd-t-24">
                    <div class="bj-flex-start">
                        <span class="restaurant-title">入驻中%</span>
                        <div class="restaurant-square" style="background:#71FDFF"></div>
                    </div>
                    <div class="restaurant-number">
                        30 | 30%
                    </div>
                </div>
            </div>
            <div class="restaurant-echart" ref="restaurantId"></div>
            <div class="restaurant-img restaurant-right bj-column-center">
                <div>
                    <div class="bj-flex-start">
                        <div class="restaurant-square" style="background: #FA942B"></div>
                        <span class="check-title">入驻后%</span>
                    </div>
                    <div class="restaurant-number pd-l-16">
                        10  | 10%
                    </div>
                </div>
                <div class="pd-t-24 pd-l-16">
                    <div class="bj-flex-start">
                        <span class="restaurant-title">入驻总数</span>
                    </div>
                    <div class="restaurant-number">
                        9999
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echartTitle from "@/components/echartTitle.vue";
export default {
    components:{
        echartTitle
    },
    props:{
        
    },
    data () {
        return {
            
        }
    },
     mounted () {
        this.initChart();
    },
    methods: {
        generateData(totalNum, bigvalue, smallvalue, color) {
            let dataArr = [];
            for (var i = 0; i < totalNum; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: bigvalue,
                        itemStyle: {
                            normal: {
                                color: color,
                                borderWidth: 0,
                            }
                        }
                    });
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: smallvalue,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                            }
                        }
                    });
                }

            }
            return dataArr;
        },
        initChart(){
            // 初始化 echarts 实例
            const myChart = this.$echarts.init(this.$refs.restaurantId);
             // 指定图表的配置项和数据
            const option = {
                graphic: {
                    elements: [
                        {
                            type: 'text',
                            top: 'center',
                            left: 'center',
                            style: {
                                text: 60,
                                textAlign: 'center',
                                fill: '#7ED0F5',
                                fontSize: 14,
                            },
                        },
                        {
                            type: 'text',
                            top: '30%',
                            left: 'center',
                            style: {
                                text: '总数',
                                textAlign: 'center',
                                fill: '#FFFFFF',
                                fontSize: 14,
                                fontWeight: 'normal',
                            },
                        },
                        {
                            type: 'text',
                            top: '60%',
                            left: 'center',
                            style: {
                                text: '家',
                                textAlign: 'center',
                                fill: '#FFFFFF',
                                fontSize: 14,
                                fontWeight: 'normal',
                            },
                        },
                    ],
                },
                series: [
                    {
                        name: '餐厅进度',
                        type: 'pie',
                        radius: ['90%', '100%'],
                        avoidLabelOverlap: true,
                        emphasis: {
                            scale: true,
                            scaleSize: 10,
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 600,
                            },
                            labelLine: {
                                lineStyle: {
                                    type: 'dashed',
                                },
                            },
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            length: 20,
                            length2: 40,
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            },
                        },
                        z: 3,
                        data: [
                            {
                                name: '入驻前',
                                value: 60,
                                itemStyle: {
                                    color: '#0E81FC',
                                },
                                label: {
                                    formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
                                    rich: {
                                        hr: {
                                            backgroundColor: '#0E81FC',
                                            width: 11,
                                            height: 11,
                                            borderColor: '#0E81FC',
                                            borderWidth: 3,
                                        },
                                        space: {
                                            padding: [0, 8, 0, 0],
                                        },
                                        a: {
                                            color: '#666666',
                                            fontSize: 12,
                                        },
                                    },
                                },
                                emphasis: {
                                    labelLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#0E81FC',
                                        },
                                    },
                                },
                            },
                            {
                                value: 30,
                                name: '入驻中',
                                itemStyle: {
                                    color: '#71FDFF',
                                },
                                label: {
                                    formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
                                    rich: {
                                        hr: {
                                            backgroundColor: '#71FDFF',
                                            width: 11,
                                            height: 11,
                                            borderColor: '#71FDFF',
                                            borderWidth: 3,
                                        },
                                        space: {
                                            padding: [0, 8, 0, 0],
                                        },
                                        a: {
                                            color: '#666666',
                                            fontSize: 12,
                                        },
                                    },
                                },
                                emphasis: {
                                    labelLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#71FDFF',
                                        },
                                    },
                                },
                            },
                            {
                                value: 10,
                                name: '入驻后',
                                itemStyle: {
                                    color: '#FA942B',
                                },
                                label: {
                                    formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
                                    rich: {
                                        hr: {
                                            backgroundColor: '#FA942B',
                                            width: 11,
                                            height: 11,
                                            borderColor: '#FA942B',
                                            borderWidth: 3,
                                        },
                                        space: {
                                            padding: [0, 8, 0, 0],
                                        },
                                        a: {
                                            color: '#666666',
                                            fontSize: 12,
                                        },
                                    },
                                },
                                emphasis: {
                                    labelLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#FA942B',
                                        },
                                    },
                                },
                            }
                        ],
                    },
                    {
                        name: '不动外圆',
                        type: 'pie',
                        zlevel: 4,
                        silent: true,
                        radius: ['80%', '79%'],
                        label: {
                            show: false,
                        },
                        data: this.generateData(100, 25, 20, '#0C71DE'),
                    },
                ],
            }
            // 使用配置项显示图表
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" class>
.restaurant-progress{
    width: 456px;
    height: 240px;
    .restaurant-content{
        position: relative;
        width: 100%;
        height: 198px;
        background: linear-gradient( 180deg, rgba(7,29,65,0.1) 0%, rgba(10,47,107,0.4) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(34, 83, 135, 1), rgba(42, 112, 186, 1), rgba(34, 83, 135, 1), rgba(57, 128, 202, 1), rgba(34, 83, 135, 1)) 1 1;
    }
    .restaurant-img{
        width: 170px;
        height: 160px;
        background: url("../../assets/restaurant-left.png") center no-repeat;
        background-size: 100% 100%;
    }
    .restaurant-left{
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translate(0, -50%);
    }
    .restaurant-right{
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translate(0, -50%);
        background: url("../../assets/restaurant-right.png") center no-repeat;
        background-size: 100% 100%;
    }
    .restaurant-title{
        padding-right: 8px;
        font-size: 14px;
        color: #AACBDE;
    }
    .check-title{
        padding-left: 8px;
        font-size: 14px;
        color: #AACBDE;
    }
    .restaurant-square{
        width: 8px;
        height: 8px;
        background: #0E81FC;
    }
    .restaurant-number{
        padding-top: 8px;
        font-weight: bold;
        font-size: 16px;
        color: #FFFFFF;
    }
    .pd-t-24{
        padding-top: 24px;
    }
    .pd-l-16{
        padding-left: 16px;
    }
    .restaurant-echart{
        width: 152px;
        height: 152px;
    }
}
</style>